<template>
  <div>
    <el-drawer
      :visible.sync="showDrawer"
      :title="$t('send')"
      size="35%"
      v-loading="loading"
      @close="close"
      class="settle-drawer"
    >
      <el-card>
        <div class="balance">
          <p>
            <span class="currency">{{ feeInfo.fee_unit || "USDT" }}</span>

            <el-tag class="chain_alias">{{ feeInfo.chain_alias }}</el-tag>
          </p>
          <p>
            <span
              >{{ $t("total") }} :
              {{ formatMoney(available, true) || "--" }}</span
            >
            <span style="margin-left: 2px">{{ coin_name }}</span>
          </p>
        </div>
        <el-divider />
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-position="top"
        >
          <!-- <el-form-item :label="$t('currency')" prop="currency">
            <el-input v-model="ruleForm.currency" style="width: 100%" disabled>
            </el-input>
          </el-form-item> -->
          <el-form-item :label="$t('receiveAddress')" prop="address">
            <el-input
              v-model="ruleForm.address"
              :placeholder="$t('addressTips')"
            ></el-input>
          </el-form-item>
          <p class="tips">
            *
            {{
              $t("walletTips", {
                coin_name: feeInfo.fee_unit,
                chain_alias: feeInfo.chain_alias,
              })
            }}
          </p>
          <el-form-item :label="$t('count')" prop="amount">
            <el-input
              v-model="ruleForm.amount"
              :placeholder="$t('countTips')"
              type="number"
              @input="amountInput"
            >
              <template slot="append">
                <el-button @click="allIn"> {{ $t("all") }}</el-button>
              </template>
            </el-input>
          </el-form-item>
          <p class="fee">
            {{ $t("fee") }}:
            {{ formatMoney(feeRateTotal) }}
            {{ feeInfo.fee_unit || "USDT" }}
          </p>
          <el-form-item :label="$t('description')">
            <el-input
              v-model="ruleForm.msg"
              :placeholder="$t('descriptionTips')"
              type="textarea"
              :rows="4"
            >
            </el-input>
          </el-form-item>
        </el-form>
        <div class="drawerBtn">
          <el-button type="primary" @click="submitForm('ruleForm')">{{
            $t("submit")
          }}</el-button>
        </div>
      </el-card>
    </el-drawer>
    <el-dialog
      :title="$t('confirmSend')"
      :visible.sync="dialogVisible"
      width="30%"
      @close="dialogVisible = false"
    >
      <div class="info">
        <p>{{ $t("tradeType") }}</p>
        <p class="infoValue">{{ $t("sendType") }}</p>
      </div>
      <div class="info">
        <p>{{ $t("receiveAddress") }}</p>
        <p class="infoValue">{{ ruleForm.address }}</p>
      </div>
      <div class="info">
        <p>{{ $t("count") }}</p>
        <p class="infoValue">{{ ruleForm.amount }} USDT</p>
      </div>
      <div class="info">
        <p>{{ $t("fee") }}</p>
        <p class="infoValue">
          {{ formatMoney(feeRateTotal) }}
          {{ feeInfo.fee_unit }}
        </p>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false" type="info">{{
          $t("cancel")
        }}</el-button>
        <el-button type="primary" @click="confirm">{{ $t("Ok") }}</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { httpWalletSend, httpGetWalletSend } from "@/http/api";
// import { dayjs } from "element-ui";
import { copyText, formatMoney } from "@/utils/common";
export default {
  name: "walletDetail",
  props: {
    show: {
      type: Boolean,
      default: false,
    },
    available: {
      type: Number,
      default: 0,
    },
    coin_name: {
      type: String,
      default: "USDT",
    },
  },
  data() {
    return {
      loading: true,
      showDrawer: false,
      options: [
        {
          value: "选项1",
          label: "黄金糕",
        },
      ],
      ruleForm: {
        amount: "",
        address: "",
        msg: "",
      },
      rules: {
        currency: [
          {
            required: true,
            message: this.$t("currencyTips"),
            trigger: "change",
          },
        ],
        amount: [
          { required: true, message: this.$t("countTips"), trigger: "change" },
        ],
        address: [
          {
            required: true,
            message: this.$t("addressTips"),
            trigger: "change",
          },
        ],
      },
      dialogVisible: false,
      feeInfo: {},
      feeRateTotal: 0,
    };
  },
  created() {},
  methods: {
    formatMoney,
    copy(text) {
      copyText(text);
      this.$message.success(this.$t("copySuccess"));
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.dialogVisible = true;
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    async confirm() {
      const res = await httpWalletSend(this.ruleForm);
      if (res.code == 0) {
        this.$message.success(this.$t("sendSuccessTips"));
      } else {
        this.$message.error(res.message);
      }
      this.dialogVisible = false;
      this.ruleForm.amount = "";
      this.ruleForm.address = "";
      this.ruleForm.msg = "";
      this.$emit("close");
      this.$emit("refresh");
    },
    allIn() {
      this.ruleForm.amount = this.feeInfo.available || 0;
      this.feeRateTotal =
        this.feeInfo.fee_rate * this.ruleForm.amount + Number(this.feeInfo.fee);
    },
    amountInput(val) {
      this.feeRateTotal =
        this.feeInfo.fee_rate * val + Number(this.feeInfo.fee);
    },
    async getFee() {
      const res = await httpGetWalletSend();
      this.feeInfo = res.data || {};
    },
    close() {
      this.$emit("close");
      this.ruleForm.amount = "";
      this.ruleForm.address = "";
      this.ruleForm.msg = "";
    },
  },
  watch: {
    show(val) {
      this.showDrawer = val;
      if (val) {
        this.getFee();
      }
    },
  },
};
</script>
<style lang="less" scoped>
.balance {
  display: flex;
  justify-content: space-between;
  align-items: center;
  .chain_alias {
    background: #513216;
    color: #fff;
    border-color: #513216;
  }
  p {
    display: flex;
    align-items: center;
    .currency {
      font-size: 20px;
      margin-right: 6px;
    }
    .el-tag {
      height: 20px;
      width: 60px;
      line-height: 18px;
    }
  }
}
.detailItem {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;
  font-size: 16px;
  .itemValue {
    max-width: 60%;
    word-break: break-all;
    text-align: right;
  }
}
.detailCard {
  width: 100%;
}
.copyIcon {
  cursor: pointer;
}
.settle-drawer ::v-deep .el-select-dropdown {
  position: absolute !important;
}
.settle-drawer ::v-deep .el-divider {
  margin: 18px 0 12px;
}
.settle-drawer ::v-deep .el-form-item__label {
  font-size: 18px;
  padding: 0;
}
.settle-drawer ::v-deep .el-form-item {
  margin-bottom: 8px;
}
.fee {
  text-align: right;
  font-size: 14px;
  color: #513216;
}
.tips {
  margin-top: 22px;
  font-size: 14px;
  color: #513216;
  margin-bottom: 12px;
}
.drawerBtn {
  width: 100%;
  margin-top: 22px;
  .el-button {
    font-size: 18px;
    width: 100%;
    background-color: #513216;
    border-color: #513216;
  }
}
.info {
  margin-bottom: 20px;
  font-size: 16px;
  .infoValue {
    color: #513216;
    margin-top: 8px;
  }
}
.dialog-footer {
  display: flex;
  justify-content: center;
  .el-button {
    width: 150px;
    margin-right: 20px;
  }
  .el-button--primary {
    background-color: #513216;
    border-color: #513216;
  }
}
</style>
